import React, { useState } from 'react';
import { 
  Card, 
  Row, 
  Col, 
  Button, 
  Input, 
  Space,
  Typography,
  Avatar,
  Progress,
  Modal,
  Form,
  Select,
  message,
  Popconfirm,
  Tooltip,
  Divider,
  Badge,
  Dropdown
} from 'antd';
import {
  PlusOutlined,
  FilterOutlined,
  ExportOutlined,
  SearchOutlined,
  EyeOutlined,
  ShareAltOutlined,
  EditOutlined,
  DeleteOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  DownOutlined,
  ProjectOutlined,
  DatabaseOutlined,
  ShareAltOutlined as RelationOutlined,
  BarChartOutlined,
  MoreOutlined,
  AppstoreOutlined,
  UnorderedListOutlined,
  NodeIndexOutlined,
  ApartmentOutlined,
  BranchesOutlined,
  ClusterOutlined,
  DeploymentUnitOutlined,
  ApiOutlined,
  SisternodeOutlined,
  ForkOutlined,
  GlobalOutlined,
  SettingOutlined
} from '@ant-design/icons';

// 导入新的功能组件
import GraphPreviewModal from './components/GraphPreviewModal';
import GraphEditModal from './components/GraphEditModal';
import ShareModal from '../../../components/ShareModal';

const { Title, Text } = Typography;
const { Option } = Select;

const KnowledgeGraphPage = () => {
  const [searchText, setSearchText] = useState('');
  const [selectedGraph, setSelectedGraph] = useState(null);
  const [previewVisible, setPreviewVisible] = useState(false);
  const [editVisible, setEditVisible] = useState(false);
  const [shareVisible, setShareVisible] = useState(false);
  const [basicInfoEditVisible, setBasicInfoEditVisible] = useState(false);
  const [viewMode, setViewMode] = useState('grid'); // grid, list
  const [form] = Form.useForm();

  // 统计数据
  const statsData = [
    {
      title: '图谱数量',
      value: 24,
      change: 12,
      changeType: 'increase',
      suffix: '较上月',
      icon: <ProjectOutlined style={{ color: '#1677ff' }} />,
      color: '#1677ff'
    },
    {
      title: '实体总数',
      value: 1582,
      change: 8,
      changeType: 'increase',
      suffix: '较上月',
      icon: <DatabaseOutlined style={{ color: '#00b96b' }} />,
      color: '#00b96b'
    },
    {
      title: '关系总数',
      value: 3241,
      change: -2,
      changeType: 'decrease',
      suffix: '较上月',
      icon: <RelationOutlined style={{ color: '#722ed1' }} />,
      color: '#722ed1'
    },
    {
      title: '本月新增',
      value: 12,
      change: 5,
      changeType: 'increase',
      suffix: '较上月',
      icon: <BarChartOutlined style={{ color: '#fa8c16' }} />,
      color: '#fa8c16'
    }
  ];

  // 图谱类型定义 - 扩展更多类型
  const graphTypeDefinitions = {
    knowledge: {
      name: '知识图谱',
      icon: <NodeIndexOutlined />,
      relationTypes: ['包含', '属于', '关联', '等价', '部分-整体', '基于', '应用于', '实现'],
      nodeTypes: ['概念', '实体', '属性', '事件', '类别', '技术', '方法', '理论']
    },
    concept: {
      name: '概念图谱',
      icon: <ApartmentOutlined />,
      relationTypes: ['是一种', '有一个', '导致', '相关', '对立', '包含', '影响'],
      nodeTypes: ['概念', '命题', '属性', '示例', '类别', '原理', '定义']
    },
    mind: {
      name: '思维导图',
      icon: <BranchesOutlined />,
      relationTypes: ['包含', '关联', '顺序', '分支', '扩展'],
      nodeTypes: ['主题', '子主题', '关键词', '注释', '要点', '细节']
    },
    topic: {
      name: '主题图谱',
      icon: <ClusterOutlined />,
      relationTypes: ['关联', '实例', '类型-实例', '上位-下位', '同类', '相关'],
      nodeTypes: ['主题', '实例', '关联', '作用域', '话题', '领域']
    },
    semantic: {
      name: '语义网络',
      icon: <DeploymentUnitOutlined />,
      relationTypes: ['是一种', '部分-整体', '属性', '同义', '反义', '相关', '蕴含'],
      nodeTypes: ['概念', '事件', '属性', '关系', '实体', '词汇', '语义']
    },
    ontology: {
      name: '本体图谱',
      icon: <ApiOutlined />,
      relationTypes: ['子类-父类', '实例', '属性', '等价', '互斥', '约束', '推理'],
      nodeTypes: ['类', '实例', '属性', '关系', '公理', '规则', '约束']
    },
    social: {
      name: '社交网络',
      icon: <ShareAltOutlined />,
      relationTypes: ['朋友', '关注', '合作', '亲属', '通信', '互动', '影响'],
      nodeTypes: ['人', '组织', '群组', '角色', '事件', '关系', '社区']
    },
    causal: {
      name: '因果图谱',
      icon: <SisternodeOutlined />,
      relationTypes: ['导致', '影响', '相关', '前提', '结果', '促进', '阻碍'],
      nodeTypes: ['事件', '状态', '变量', '条件', '结果', '因子', '效应']
    },
    flow: {
      name: '流程图谱',
      icon: <ForkOutlined />,
      relationTypes: ['下一步', '条件分支', '并行', '循环', '开始/结束', '触发', '完成'],
      nodeTypes: ['活动', '决策', '开始', '结束', '子流程', '任务', '节点']
    },
    network: {
      name: '网络图谱',
      icon: <GlobalOutlined />,
      relationTypes: ['连接', '流向', '权重', '类型', '强度', '传输', '路径'],
      nodeTypes: ['节点', '枢纽', '集群', '端点', '网关', '服务器', '设备']
    },
    innovation: {
      name: '创新图谱',
      icon: <BranchesOutlined />,
      relationTypes: ['启发', '结合', '改进', '创新', '应用', '发展', '突破'],
      nodeTypes: ['导论', '创造', '创新方法', '创造性思维', '创新能力', '创新教育', '创新理论']
    },
    research: {
      name: '研究图谱',
      icon: <ProjectOutlined />,
      relationTypes: ['研究', '发现', '验证', '支持', '反驳', '扩展', '应用'],
      nodeTypes: ['理论', '方法', '发现', '假设', '实验', '数据', '结论']
    },
    education: {
      name: '教育图谱',
      icon: <ApartmentOutlined />,
      relationTypes: ['教授', '学习', '掌握', '应用', '评估', '反馈', '改进'],
      nodeTypes: ['课程', '知识点', '技能', '学习者', '教师', '资源', '评价']
    }
  };

  // 图谱布局样式定义
  const graphLayoutDefinitions = {
    force: { 
      name: '力导向布局', 
      description: '基于物理模拟的节点自然分布',
      icon: <ClusterOutlined />
    },
    circular: { 
      name: '环形布局', 
      description: '节点均匀分布在圆周上',
      icon: <GlobalOutlined />
    },
    hierarchical: { 
      name: '层次布局', 
      description: '按层级关系从上到下排列',
      icon: <ApartmentOutlined />
    },
    grid: { 
      name: '网格布局', 
      description: '节点均匀分布在网格中',
      icon: <AppstoreOutlined />
    },
    radial: { 
      name: '辐射布局', 
      description: '从中心向外辐射的树状结构',
      icon: <SisternodeOutlined />
    },
    tree: { 
      name: '树形布局', 
      description: '自上而下或自左向右的树状结构',
      icon: <BranchesOutlined />
    }
  };

  // 图谱列表数据 - 统一数据格式
  const [graphData, setGraphData] = useState([
    {
      key: '1',
      name: '人工智能知识图谱',
      type: 'knowledge', // 图谱类型
      entities: 128,
      relations: 256,
      creator: '小明',
      createTime: '2023-06-15',
      lastEditor: '小明',
      status: 'AI领域',
      progress: 85,
      description: '涵盖机器学习、深度学习、自然语言处理等AI核心技术',
      tags: ['AI', '机器学习', '深度学习'],
      isPublic: true,
      viewCount: 1024,
      layout: 'force', // 默认布局
      nodes: [
        { 
          id: '1', 
          label: '人工智能', 
          x: 300, 
          y: 150, 
          color: '#1677ff', 
          type: 'concept',
          size: 40,
          properties: { description: 'AI核心概念', category: '技术领域' }
        },
        { 
          id: '2', 
          label: '机器学习', 
          x: 200, 
          y: 200, 
          color: '#00b96b', 
          type: 'technology',
          size: 35,
          properties: { description: '机器学习技术', category: '核心技术' }
        },
        { 
          id: '3', 
          label: '深度学习', 
          x: 400, 
          y: 200, 
          color: '#722ed1', 
          type: 'technology',
          size: 35,
          properties: { description: '深度学习技术', category: '核心技术' }
        },
        { 
          id: '4', 
          label: '神经网络', 
          x: 350, 
          y: 280, 
          color: '#fa8c16', 
          type: 'concept',
          size: 30,
          properties: { description: '神经网络概念', category: '基础理论' }
        },
        { 
          id: '5', 
          label: '自然语言处理', 
          x: 150, 
          y: 280, 
          color: '#fa541c', 
          type: 'technology',
          size: 30,
          properties: { description: 'NLP技术', category: '应用技术' }
        },
        { 
          id: '6', 
          label: '计算机视觉', 
          x: 450, 
          y: 280, 
          color: '#13c2c2', 
          type: 'technology',
          size: 30,
          properties: { description: 'CV技术', category: '应用技术' }
        }
      ],
      edges: [
        { 
          id: 'e1', 
          source: '1', 
          target: '2', 
          label: '包含', 
          type: 'contains',
          weight: 1,
          properties: { strength: 'strong', direction: 'forward' }
        },
        { 
          id: 'e2', 
          source: '2', 
          target: '3', 
          label: '包含', 
          type: 'contains',
          weight: 1,
          properties: { strength: 'strong', direction: 'forward' }
        },
        { 
          id: 'e3', 
          source: '3', 
          target: '4', 
          label: '基于', 
          type: 'based_on',
          weight: 0.8,
          properties: { strength: 'medium', direction: 'forward' }
        },
        { 
          id: 'e4', 
          source: '1', 
          target: '5', 
          label: '包含', 
          type: 'contains',
          weight: 1,
          properties: { strength: 'strong', direction: 'forward' }
        },
        { 
          id: 'e5', 
          source: '1', 
          target: '6', 
          label: '包含', 
          type: 'contains',
          weight: 1,
          properties: { strength: 'strong', direction: 'forward' }
        },
        { 
          id: 'e6', 
          source: '4', 
          target: '5', 
          label: '应用于', 
          type: 'applied_to',
          weight: 0.6,
          properties: { strength: 'medium', direction: 'forward' }
        },
        { 
          id: 'e7', 
          source: '4', 
          target: '6', 
          label: '应用于', 
          type: 'applied_to',
          weight: 0.6,
          properties: { strength: 'medium', direction: 'forward' }
        }
      ]
    },
    {
      key: '2',
      name: '前端开发技术图谱',
      type: 'knowledge',
      entities: 96,
      relations: 184,
      creator: '小红',
      createTime: '2023-06-10',
      lastEditor: '小红',
      status: '技术',
      progress: 72,
      description: 'React、Vue、Angular等前端框架技术体系',
      tags: ['前端', 'React', 'Vue'],
      isPublic: false,
      viewCount: 642,
      layout: 'hierarchical',
      nodes: [
        { 
          id: '1', 
          label: '前端开发', 
          x: 300, 
          y: 150, 
          color: '#1677ff', 
          type: 'concept',
          size: 40,
          properties: { description: '前端开发概念', category: '技术领域' }
        },
        { 
          id: '2', 
          label: 'React', 
          x: 200, 
          y: 250, 
          color: '#61dafb', 
          type: 'technology',
          size: 35,
          properties: { description: 'React框架', category: '前端框架' }
        },
        { 
          id: '3', 
          label: 'Vue', 
          x: 300, 
          y: 250, 
          color: '#4fc08d', 
          type: 'technology',
          size: 35,
          properties: { description: 'Vue框架', category: '前端框架' }
        },
        { 
          id: '4', 
          label: 'Angular', 
          x: 400, 
          y: 250, 
          color: '#dd0031', 
          type: 'technology',
          size: 35,
          properties: { description: 'Angular框架', category: '前端框架' }
        },
        { 
          id: '5', 
          label: 'JavaScript', 
          x: 300, 
          y: 50, 
          color: '#f7df1e', 
          type: 'technology',
          size: 45,
          properties: { description: 'JavaScript语言', category: '编程语言' }
        }
      ],
      edges: [
        { 
          id: 'e1', 
          source: '5', 
          target: '1', 
          label: '基础', 
          type: 'foundation',
          weight: 1,
          properties: { strength: 'strong', direction: 'forward' }
        },
        { 
          id: 'e2', 
          source: '1', 
          target: '2', 
          label: '框架', 
          type: 'framework',
          weight: 0.8,
          properties: { strength: 'strong', direction: 'forward' }
        },
        { 
          id: 'e3', 
          source: '1', 
          target: '3', 
          label: '框架', 
          type: 'framework',
          weight: 0.8,
          properties: { strength: 'strong', direction: 'forward' }
        },
        { 
          id: 'e4', 
          source: '1', 
          target: '4', 
          label: '框架', 
          type: 'framework',
          weight: 0.8,
          properties: { strength: 'strong', direction: 'forward' }
        }
      ]
    },
    {
      key: '3',
      name: '创造性思维与创新方法图谱',
      type: 'innovation',
      entities: 78,
      relations: 142,
      creator: '小李',
      createTime: '2023-06-08',
      lastEditor: '小李',
      status: '创新',
      progress: 68,
      description: '创造性思维理论与创新方法体系',
      tags: ['创新', '思维', '方法'],
      isPublic: true,
      viewCount: 856,
      layout: 'radial',
      nodes: [
        { 
          id: '1', 
          label: '创造性思维与创新方法', 
          x: 400, 
          y: 300, 
          color: '#1677ff', 
          type: '导论',
          size: 50,
          properties: { description: '核心概念', category: '中心主题' }
        },
        { 
          id: '2', 
          label: '导论', 
          x: 400, 
          y: 150, 
          color: '#ff4d4f', 
          type: '导论',
          size: 35,
          properties: { description: '理论导论', category: '基础理论' }
        },
        { 
          id: '3', 
          label: '创造', 
          x: 600, 
          y: 200, 
          color: '#ff7875', 
          type: '创造',
          size: 35,
          properties: { description: '创造概念', category: '核心概念' }
        },
        { 
          id: '4', 
          label: '创新方法', 
          x: 500, 
          y: 450, 
          color: '#722ed1', 
          type: '创新方法',
          size: 35,
          properties: { description: '创新方法论', category: '方法体系' }
        },
        { 
          id: '5', 
          label: '创造性思维', 
          x: 700, 
          y: 350, 
          color: '#eb2f96', 
          type: '创造性思维',
          size: 35,
          properties: { description: '创造性思维理论', category: '思维理论' }
        },
        { 
          id: '6', 
          label: '创新能力', 
          x: 650, 
          y: 450, 
          color: '#ff85c0', 
          type: '创新能力',
          size: 30,
          properties: { description: '创新能力培养', category: '能力发展' }
        },
        { 
          id: '7', 
          label: '创新教育', 
          x: 550, 
          y: 200, 
          color: '#ffa39e', 
          type: '创新教育',
          size: 30,
          properties: { description: '创新教育理论', category: '教育应用' }
        }
      ],
      edges: [
        { 
          id: 'e1', 
          source: '1', 
          target: '2', 
          label: '包含', 
          type: 'contains',
          weight: 1,
          properties: { strength: 'strong', direction: 'bidirectional' }
        },
        { 
          id: 'e2', 
          source: '1', 
          target: '3', 
          label: '关联', 
          type: 'related',
          weight: 0.9,
          properties: { strength: 'strong', direction: 'bidirectional' }
        },
        { 
          id: 'e3', 
          source: '1', 
          target: '4', 
          label: '包含', 
          type: 'contains',
          weight: 1,
          properties: { strength: 'strong', direction: 'forward' }
        },
        { 
          id: 'e4', 
          source: '1', 
          target: '5', 
          label: '包含', 
          type: 'contains',
          weight: 1,
          properties: { strength: 'strong', direction: 'forward' }
        },
        { 
          id: 'e5', 
          source: '5', 
          target: '6', 
          label: '发展', 
          type: 'develops',
          weight: 0.8,
          properties: { strength: 'medium', direction: 'forward' }
        },
        { 
          id: 'e6', 
          source: '3', 
          target: '7', 
          label: '应用', 
          type: 'applied_to',
          weight: 0.7,
          properties: { strength: 'medium', direction: 'forward' }
        }
      ]
    },
    {
      key: '4',
      name: '系统架构设计图谱',
      type: 'network',
      entities: 156,
      relations: 320,
      creator: '小王',
      createTime: '2023-06-05',
      lastEditor: '小王',
      status: '架构',
      progress: 91,
      description: '微服务、分布式系统、云原生架构设计',
      tags: ['架构', '微服务', '分布式'],
      isPublic: true,
      viewCount: 1342,
      layout: 'hierarchical',
      nodes: [],
      edges: []
    },
    {
      key: '5',
      name: '网络安全知识体系',
      type: 'knowledge',
      entities: 112,
      relations: 218,
      creator: '小张',
      createTime: '2023-06-01',
      lastEditor: '小张',
      status: '安全',
      progress: 76,
      description: '网络安全、信息安全、渗透测试相关知识',
      tags: ['安全', '渗透测试', '防护'],
      isPublic: false,
      viewCount: 523,
      layout: 'force',
      nodes: [],
      edges: []
    },
    {
      key: '6',
      name: '移动应用开发图谱',
      type: 'knowledge',
      entities: 84,
      relations: 156,
      creator: '小陈',
      createTime: '2023-05-28',
      lastEditor: '小陈',
      status: '移动端',
      progress: 63,
      description: 'iOS、Android、Flutter跨平台开发技术',
      tags: ['移动端', 'iOS', 'Android'],
      isPublic: true,
      viewCount: 734,
      layout: 'grid',
      nodes: [],
      edges: []
    }
  ]);

  const getStatusColor = (status) => {
    const colors = {
      'AI领域': '#1677ff',
      '技术': '#00b96b',
      '架构': '#722ed1',
      '安全': '#fa541c',
      '移动端': '#fa8c16'
    };
    return colors[status] || '#1677ff';
  };

  // 处理预览 - 只负责预览图谱
  const handlePreview = (graph) => {
    setSelectedGraph(graph);
    setPreviewVisible(true);
  };

  // 处理编辑 - 只负责编辑图谱节点和关系
  const handleEdit = (graph) => {
    setSelectedGraph(graph);
    setEditVisible(true);
  };

  // 处理基本信息编辑 - 编辑图谱基本信息
  const handleBasicInfoEdit = (graph) => {
    setSelectedGraph(graph);
    form.setFieldsValue({
      name: graph.name,
      description: graph.description,
      status: graph.status,
      isPublic: graph.isPublic
    });
    setBasicInfoEditVisible(true);
  };

  // 处理删除
  const handleDelete = (graph) => {
    setGraphData(prev => prev.filter(item => item.key !== graph.key));
    message.success(`已删除图谱：${graph.name}`);
  };

  // 处理分享 - 只负责分享图谱
  const handleShare = (graph) => {
    setSelectedGraph(graph);
    setShareVisible(true);
  };

  // 保存基本信息编辑
  const handleSaveBasicInfo = async () => {
    try {
      const values = await form.validateFields();
      setGraphData(prev => prev.map(item => 
        item.key === selectedGraph.key 
          ? { ...item, ...values }
          : item
      ));
      message.success('图谱信息已更新');
      setBasicInfoEditVisible(false);
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  // 保存图谱编辑
  const handleSaveGraphEdit = (updatedGraphData) => {
    setGraphData(prev => prev.map(item => 
      item.key === selectedGraph.key 
        ? updatedGraphData
        : item
    ));
    setEditVisible(false);
  };

  // 创建新图谱
  const handleCreateGraph = (graphType) => {
    const newGraph = {
      key: `graph_${Date.now()}`,
      name: `新建${graphTypeDefinitions[graphType].name}`,
      type: graphType, // 图谱类型
      entities: 0,
      relations: 0,
      creator: '当前用户',
      createTime: new Date().toISOString().split('T')[0],
      lastEditor: '当前用户',
      status: graphTypeDefinitions[graphType].name,
      progress: 0,
      description: `这是一个新建的${graphTypeDefinitions[graphType].name}`,
      tags: [],
      isPublic: false,
      viewCount: 0,
      layout: 'force', // 默认布局
      nodes: [],
      edges: []
    };
    
    setGraphData(prev => [newGraph, ...prev]);
    handleEdit(newGraph);
    message.success(`新${graphTypeDefinitions[graphType].name}创建成功`);
  };

  // 渲染网格视图
  const renderGridView = () => {
    return (
      <Row gutter={[16, 16]}>
        {graphData.filter(graph => 
          graph.name.toLowerCase().includes(searchText.toLowerCase())
        ).map(graph => (
          <Col xs={24} sm={12} lg={8} xl={6} key={graph.key}>
            <Card
              hoverable
              style={{ 
                borderRadius: '12px',
                border: '1px solid #f0f0f0',
                boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
                transition: 'all 0.3s ease'
              }}
              styles={{ body: { padding: '16px' } }}
              cover={
                <div style={{ 
                  height: '120px', 
                  background: `linear-gradient(135deg, ${getStatusColor(graph.status)}15, ${getStatusColor(graph.status)}05)`,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  position: 'relative'
                }}>
                  <Avatar 
                    size={48} 
                    style={{ 
                      backgroundColor: getStatusColor(graph.status),
                      fontSize: '20px',
                      fontWeight: 600
                    }}
                  >
                    {graph.name.charAt(0)}
                  </Avatar>
                  {graph.isPublic && (
                    <Badge 
                      count="公开" 
                      style={{ 
                        position: 'absolute',
                        top: '8px',
                        right: '8px',
                        backgroundColor: '#52c41a'
                      }} 
                    />
                  )}
                </div>
              }
              actions={[
                <Tooltip title="预览">
                  <EyeOutlined onClick={() => handlePreview(graph)} />
                </Tooltip>,
                <Tooltip title="编辑图谱">
                  <EditOutlined onClick={() => handleEdit(graph)} />
                </Tooltip>,
                <Tooltip title="分享">
                  <ShareAltOutlined onClick={() => handleShare(graph)} />
                </Tooltip>,
                <Dropdown
                  menu={{
                    items: [
                      {
                        key: 'basicInfo',
                        label: '编辑基本信息',
                        icon: <SettingOutlined />
                      },
                      {
                        key: 'duplicate',
                        label: '复制图谱',
                        icon: <PlusOutlined />
                      },
                      {
                        key: 'export',
                        label: '导出图谱',
                        icon: <ExportOutlined />
                      },
                      {
                        type: 'divider'
                      },
                      {
                        key: 'delete',
                        label: '删除图谱',
                        icon: <DeleteOutlined />,
                        danger: true,
                        onClick: () => {
                          Modal.confirm({
                            title: '确认删除',
                            content: `确定要删除图谱"${graph.name}"吗？删除后无法恢复。`,
                            onOk: () => handleDelete(graph)
                          });
                        }
                      }
                    ],
                    onClick: ({ key }) => {
                      if (key === 'basicInfo') {
                        handleBasicInfoEdit(graph);
                      }
                    }
                  }}
                  trigger={['click']}
                >
                  <MoreOutlined />
                </Dropdown>
              ]}
            >
              <div style={{ marginBottom: '12px' }}>
                <Title level={5} style={{ margin: 0, marginBottom: '4px' }}>
                  {graph.name}
                </Title>
                <Text type="secondary" style={{ fontSize: '12px' }}>
                  {graph.description}
                </Text>
              </div>
              
              <div style={{ marginBottom: '12px' }}>
                <Space size={4}>
                  {graph.tags.map(tag => (
                    <span
                      key={tag}
                      style={{
                        padding: '2px 6px',
                        background: '#f0f0f0',
                        borderRadius: '4px',
                        fontSize: '11px',
                        color: '#666'
                      }}
                    >
                      {tag}
                    </span>
                  ))}
                </Space>
              </div>

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
                <Text style={{ fontSize: '12px', color: '#999' }}>
                  {graph.entities}个实体 · {graph.relations}个关系
                </Text>
                <Text style={{ fontSize: '12px', color: '#999' }}>
                  {graph.viewCount}次查看
                </Text>
              </div>

              <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
                <Text style={{ fontSize: '12px', color: '#999', marginRight: '8px' }}>完成度</Text>
                <Progress 
                  percent={graph.progress} 
                  size="small" 
                  style={{ flex: 1 }}
                  strokeColor={graph.progress >= 80 ? '#00b96b' : graph.progress >= 60 ? '#fa8c16' : '#ff4d4f'}
                />
              </div>

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Text style={{ fontSize: '12px', color: '#999' }}>
                  {graph.creator} · {graph.createTime}
                </Text>
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    );
  };

  // 渲染列表视图
  const renderListView = () => {
    return (
      <div style={{ background: '#fff', borderRadius: '8px' }}>
        {graphData.filter(graph => 
          graph.name.toLowerCase().includes(searchText.toLowerCase())
        ).map((graph, index) => (
          <div key={graph.key}>
            <div style={{ 
              padding: '16px 20px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between'
            }}>
              <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                <Avatar 
                  size={40} 
                  style={{ 
                    backgroundColor: getStatusColor(graph.status),
                    marginRight: '16px'
                  }}
                >
                  {graph.name.charAt(0)}
                </Avatar>
                
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
                    <Title level={5} style={{ margin: 0, marginRight: '8px' }}>
                      {graph.name}
                    </Title>
                    {graph.isPublic && (
                      <Badge count="公开" style={{ backgroundColor: '#52c41a' }} />
                    )}
                  </div>
                  <Text type="secondary" style={{ fontSize: '13px', display: 'block', marginBottom: '4px' }}>
                    {graph.description}
                  </Text>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                    <Text style={{ fontSize: '12px', color: '#999' }}>
                      {graph.entities}个实体 · {graph.relations}个关系
                    </Text>
                    <Text style={{ fontSize: '12px', color: '#999' }}>
                      {graph.creator} · {graph.createTime}
                    </Text>
                    <Text style={{ fontSize: '12px', color: '#999' }}>
                      {graph.viewCount}次查看
                    </Text>
                  </div>
                </div>
              </div>

              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                <Progress 
                  percent={graph.progress} 
                  size="small" 
                  style={{ width: '80px' }}
                  strokeColor={graph.progress >= 80 ? '#00b96b' : graph.progress >= 60 ? '#fa8c16' : '#ff4d4f'}
                />
                
                <Space>
                  <Button type="text" icon={<EyeOutlined />} onClick={() => handlePreview(graph)} />
                  <Button type="text" icon={<EditOutlined />} onClick={() => handleEdit(graph)} />
                  <Button type="text" icon={<ShareAltOutlined />} onClick={() => handleShare(graph)} />
                  <Button type="text" icon={<SettingOutlined />} onClick={() => handleBasicInfoEdit(graph)} />
                  <Popconfirm
                    title="确认删除"
                    description="删除后无法恢复，确定要删除这个图谱吗？"
                    onConfirm={() => handleDelete(graph)}
                    okText="确认"
                    cancelText="取消"
                  >
                    <Button type="text" icon={<DeleteOutlined />} danger />
                  </Popconfirm>
                </Space>
              </div>
            </div>
            {index < graphData.length - 1 && <Divider style={{ margin: 0 }} />}
          </div>
        ))}
      </div>
    );
  };

  return (
    <div style={{ padding: '24px', background: '#f7f8fa', minHeight: '100vh' }}>
      {/* 页面标题 */}
      <div style={{ marginBottom: '24px' }}>
        <Title level={2} style={{ margin: 0, color: '#1d2129', fontSize: '24px' }}>
          知识图谱管理
        </Title>
        <Text style={{ color: '#86909c', fontSize: '14px' }}>
          创建、编辑和管理您的知识图谱
        </Text>
      </div>

      {/* 统计卡片 */}
      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
        {statsData.map((stat, index) => (
          <Col xs={24} sm={12} lg={6} key={index}>
            <Card 
              style={{ 
                borderRadius: '8px',
                border: '1px solid #f0f0f0',
                boxShadow: '0 1px 2px rgba(0,0,0,0.03)'
              }}
              styles={{body:{ padding: '20px' }}}
            >
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                  <Text style={{ color: '#86909c', fontSize: '14px', display: 'block', marginBottom: '8px' }}>
                    {stat.title}
                  </Text>
                  <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: '4px' }}>
                    <span style={{ 
                      fontSize: '28px', 
                      fontWeight: 600, 
                      color: '#1d2129',
                      marginRight: '8px'
                    }}>
                      {stat.value.toLocaleString()}
                    </span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    {stat.changeType === 'increase' ? (
                      <ArrowUpOutlined style={{ color: '#00b96b', fontSize: '12px', marginRight: '4px' }} />
                    ) : (
                      <ArrowDownOutlined style={{ color: '#ff4d4f', fontSize: '12px', marginRight: '4px' }} />
                    )}
                    <Text style={{ 
                      color: stat.changeType === 'increase' ? '#00b96b' : '#ff4d4f',
                      fontSize: '12px'
                    }}>
                      {Math.abs(stat.change)}% {stat.suffix}
                    </Text>
                  </div>
                </div>
                <div style={{
                  width: '48px',
                  height: '48px',
                  borderRadius: '8px',
                  backgroundColor: `${stat.color}15`,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '20px'
                }}>
                  {stat.icon}
                </div>
              </div>
            </Card>
          </Col>
        ))}
      </Row>

      {/* 图谱列表 */}
      <Card 
        style={{ 
          borderRadius: '8px',
          border: '1px solid #f0f0f0',
          boxShadow: '0 1px 2px rgba(0,0,0,0.03)'
        }}
        styles={{body:{padding: '20px'}}}
      >
        {/* 列表头部 */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: '20px'
        }}>
          <div>
            <Title level={4} style={{ margin: 0, color: '#1d2129' }}>
              我的图谱
            </Title>
          </div>
          
          <Space>
            <Input
              placeholder="搜索图谱..."
              prefix={<SearchOutlined />}
              value={searchText}
              onChange={(e) => setSearchText(e.target.value)}
              style={{ width: 240 }}
            />
            <Button icon={<FilterOutlined />}>
              筛选
            </Button>
            <Button icon={<ExportOutlined />}>
              导出
            </Button>
            <Select
              value={viewMode}
              onChange={setViewMode}
              style={{ width: 100 }}
            >
              <Option value="grid">
                <AppstoreOutlined /> 网格
              </Option>
              <Option value="list">
                <UnorderedListOutlined /> 列表
              </Option>
            </Select>
            <Dropdown
              menu={{
                items: [
                  {
                    key: 'knowledge',
                    label: '知识图谱',
                    icon: <NodeIndexOutlined />
                  },
                  {
                    key: 'concept',
                    label: '概念图谱',
                    icon: <ApartmentOutlined />
                  },
                  {
                    key: 'mind',
                    label: '思维导图',
                    icon: <BranchesOutlined />
                  },
                  {
                    key: 'topic',
                    label: '主题图谱',
                    icon: <ClusterOutlined />
                  },
                  {
                    key: 'semantic',
                    label: '语义网络',
                    icon: <DeploymentUnitOutlined />
                  },
                  {
                    key: 'ontology',
                    label: '本体图谱',
                    icon: <ApiOutlined />
                  },
                  {
                    key: 'social',
                    label: '社交网络',
                    icon: <ShareAltOutlined />
                  },
                  {
                    key: 'causal',
                    label: '因果图谱',
                    icon: <SisternodeOutlined />
                  },
                  {
                    key: 'flow',
                    label: '流程图谱',
                    icon: <ForkOutlined />
                  },
                  {
                    key: 'network',
                    label: '网络图谱',
                    icon: <GlobalOutlined />
                  }
                ],
                onClick: ({ key }) => {
                  handleCreateGraph(key);
                }
              }}
            >
              <Button type="primary" icon={<PlusOutlined />}>
                新建图谱 <DownOutlined />
              </Button>
            </Dropdown>
          </Space>
        </div>

        {/* 图谱内容 */}
        {viewMode === 'grid' ? renderGridView() : renderListView()}
      </Card>

      {/* 预览模态框 */}
      <GraphPreviewModal
        visible={previewVisible}
        onCancel={() => setPreviewVisible(false)}
        graphData={selectedGraph}
        onEdit={handleEdit}
        onShare={handleShare}
        graphTypeDefinitions={graphTypeDefinitions}
        graphLayoutDefinitions={graphLayoutDefinitions}
      />

      {/* 编辑模态框 */}
      <GraphEditModal
        visible={editVisible}
        onCancel={() => setEditVisible(false)}
        graphData={selectedGraph}
        onSave={handleSaveGraphEdit}
        graphTypeDefinitions={graphTypeDefinitions}
        graphLayoutDefinitions={graphLayoutDefinitions}
      />

      {/* 分享模态框 */}
      <ShareModal
        visible={shareVisible}
        onCancel={() => setShareVisible(false)}
        graphData={selectedGraph}
      />

      {/* 基本信息编辑模态框 */}
      <Modal
        title="编辑图谱基本信息"
        open={basicInfoEditVisible}
        onOk={handleSaveBasicInfo}
        onCancel={() => setBasicInfoEditVisible(false)}
        width={600}
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Form.Item
            name="name"
            label="图谱名称"
            rules={[{ required: true, message: '请输入图谱名称' }]}
          >
            <Input placeholder="请输入图谱名称" />
          </Form.Item>
          
          <Form.Item
            name="description"
            label="图谱描述"
            rules={[{ required: true, message: '请输入图谱描述' }]}
          >
            <Input.TextArea rows={3} placeholder="请输入图谱描述" />
          </Form.Item>
          
          <Form.Item
            name="status"
            label="图谱分类"
            rules={[{ required: true, message: '请选择图谱分类' }]}
          >
            <Select placeholder="请选择图谱分类">
              <Option value="AI领域">AI领域</Option>
              <Option value="技术">技术</Option>
              <Option value="架构">架构</Option>
              <Option value="安全">安全</Option>
              <Option value="移动端">移动端</Option>
            </Select>
          </Form.Item>
          
          <Form.Item
            name="isPublic"
            label="是否公开"
            valuePropName="checked"
          >
            <Select>
              <Option value={true}>公开</Option>
              <Option value={false}>私有</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default KnowledgeGraphPage;
